<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import { IconSelect } from "@/components/ReIcon";
import Segmented from "@/components/ReSegmented";
import {
  menuTypeOptions,
  showLinkOptions,
  keepAliveOptions
} from "./utils/enums";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: undefined,
    type: 0,
    higherMenuOptions: [],
    parentId: 0,
    title: undefined,
    name: undefined,
    path: undefined,
    component: undefined,
    icon: undefined,
    rank: 99,
    btnPerm: undefined,
    method: undefined,
    keepAlive: false,
    showLink: 1,
    frameSrc: undefined
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}
const options = [
  {
    value: "GET",
    label: "GET"
  },
  {
    value: "POST",
    label: "POST"
  },
  {
    value: "PUT",
    label: "PUT"
  },
  {
    value: "PATCH",
    label: "PATCH"
  },
  {
    value: "DELETE",
    label: "DELETE"
  }
];
defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="82px"
  >
    <el-row :gutter="30">
      <re-col>
        <el-form-item label="菜单类型">
          <Segmented v-model="newFormInline.type" :options="menuTypeOptions" />
        </el-form-item>
      </re-col>

      <re-col>
        <el-form-item label="上级菜单">
          <el-cascader
            v-model="newFormInline.parentId"
            class="w-full"
            :options="newFormInline.higherMenuOptions"
            :props="{
              value: 'id',
              label: 'title',
              emitPath: false,
              checkStrictly: true
            }"
            clearable
            filterable
            placeholder="请选择上级菜单"
          >
            <template #default="{ node, data }">
              <span>{{ data.title }}</span>
              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
            </template>
          </el-cascader>
        </el-form-item>
      </re-col>

      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item
          :label="newFormInline.type !== 2 ? '菜单名称' : '按钮名称'"
          prop="title"
        >
          <el-input
            v-model="newFormInline.title"
            clearable
            :placeholder="
              newFormInline.type !== 2 ? '请输入菜单名称' : '请输入按钮名称'
            "
          />
        </el-form-item>
      </re-col>
      <re-col v-if="newFormInline.type !== 2" :value="12" :xs="24" :sm="24">
        <el-form-item label="路由名称" prop="name">
          <el-input
            v-model="newFormInline.name"
            clearable
            placeholder="请输入路由名称"
          />
        </el-form-item>
      </re-col>

      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="路由路径" prop="path">
          <el-input
            v-model="newFormInline.path"
            clearable
            placeholder="请输入路由路径"
          />
        </el-form-item>
      </re-col>
      <re-col
        v-show="newFormInline.type === 0 || newFormInline.type === 1"
        :value="12"
        :xs="24"
        :sm="24"
      >
        <el-form-item label="组件路径">
          <el-input
            v-model="newFormInline.component"
            clearable
            placeholder="请输入组件路径"
          />
        </el-form-item>
      </re-col>

      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item
          :label="newFormInline.type !== 2 ? '菜单排序' : '按钮排序'"
          prop="rank"
        >
          <el-input-number
            v-model="newFormInline.rank"
            class="!w-full"
            :min="1"
            :max="9999"
            controls-position="right"
          />
        </el-form-item>
      </re-col>

      <re-col v-show="newFormInline.type !== 2" :value="12" :xs="24" :sm="24">
        <el-form-item label="菜单图标">
          <IconSelect v-model="newFormInline.icon" class="w-full" />
        </el-form-item>
      </re-col>

      <re-col v-if="newFormInline.type === 2" :value="12" :xs="24" :sm="24">
        <!-- 按钮级别权限设置 -->
        <el-form-item label="权限标识" prop="btnPerm">
          <el-input
            v-model="newFormInline.btnPerm"
            clearable
            placeholder="请输入权限标识"
          />
        </el-form-item>
      </re-col>
      <re-col v-if="newFormInline.type === 2" :value="12" :xs="24" :sm="24">
        <!-- 按钮级别权限设置 -->
        <el-form-item label="请求方式" prop="method">
          <el-select
            v-model="newFormInline.method"
            placeholder="请选择请求方式"
            style="width: 240px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col v-show="newFormInline.type === 4" :value="12" :xs="24" :sm="24">
        <!-- iframe -->
        <el-form-item label="链接地址">
          <el-input
            v-model="newFormInline.frameSrc"
            clearable
            placeholder="请输入 iframe 链接地址"
          />
        </el-form-item>
      </re-col>
      <re-col v-show="newFormInline.type !== 2" :value="12" :xs="24" :sm="24">
        <el-form-item label="菜单">
          <Segmented
            :modelValue="newFormInline.showLink ? 0 : 1"
            :options="showLinkOptions"
            @change="
              ({ option: { value } }) => {
                newFormInline.showLink = value;
              }
            "
          />
        </el-form-item>
      </re-col>

      <re-col v-show="newFormInline.type < 2" :value="12" :xs="24" :sm="24">
        <el-form-item label="缓存页面">
          <Segmented
            :modelValue="newFormInline.keepAlive ? 0 : 1"
            :options="keepAliveOptions"
            @change="
              ({ option: { value } }) => {
                newFormInline.keepAlive = value;
              }
            "
          />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>
